<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>transform</title>
  <link rel="stylesheet" href="https://static.wuage.com/common/lib/reset.css">
  <style>
    body,
html {
  background: #f1f1f1
}

.mod-floor {
  position: fixed;
  left: 0;
  top: 30%;
  width: 52px;
  transform: translate(-552px, 0);
  background: #fff;
  color: #656565;
  font-size: 12px;
  z-index: 1000;
  -webkit-transition: transform .8s ease;
  -moz-transition: transform .8s ease;
  -ms-transition: transform .8s ease;
  -o-transition: transform .8s ease;
  transition: transform .8s ease
}

.mod-floor * {
  box-sizing: border-box
}

.mod-floor .floor-list {
  width: 100%
}

.mod-floor .floor-item {
  display: table;
  width: 100%;
  height: 48px;
  border-top: 1px solid #f1f1f1;
  text-align: center
}

.mod-floor .floor-item:hover {
  color: #316ccb;
  cursor: pointer
}

.mod-floor .floor-item.active {
  background: #316ccb;
  color: #fff
}

.mod-floor .floor-item .txt {
  display: table-cell;
  vertical-align: middle
}

.mod-floor .floor-item:first-child {
  border-top: 0
}

.mod-floor .floor-item:first-child:hover {
  color: #656565;
  cursor: default
}
  </style>
</head>
<body>
  <div class="mod-floor">
    <ul class="floor-list js-floor-list">
      <li class="floor-item">
        <span class="txt">快速<br/>导航</span>
      </li>
      <li class="floor-item" data-tab="管材">
        <span class="txt">管材</span>
      </li>
      <li class="floor-item" data-tab="优特钢">
        <span class="txt">优特钢</span>
      </li>
      <li class="floor-item" data-tab="冷轧冷轧">
        <span class="txt">冷轧<br/>冷轧</span>
      </li>
      <li class="floor-item" data-tab="不锈钢">
        <span class="txt">不锈钢</span>
      </li>
      <li class="floor-item" data-tab="建材型材">
        <span class="txt">建材<br/>型材</span>
      </li>
      <li class="floor-item" data-tab="涂镀中厚板">
        <span class="txt">涂镀<br/>中厚板</span>
      </li>
      <li class="floor-item" data-tab="圆钢带钢">
        <span class="txt">圆钢<br/>带钢</span>
      </li>
    </ul>
  </div>
  <div class="mod-cnt">
    <div class="floor0" style="height: 700px;background: #316ccb;">32423423432</div>
    <div class="floor1 js-floor-item" data-cnt="管材" style="height: 300px;border: 1px solid #000">管材</div>
    <div class="floor2 js-floor-item" data-cnt="优特钢" style="height: 200px;border: 1px solid #000">优特钢</div>
    <div class="floor3 js-floor-item" data-cnt="冷轧冷轧" style="height: 300px;border: 1px solid #000">冷轧冷轧</div>
    
    <div class="floor4 js-floor-item" data-cnt="不锈钢" style="height: 400px;border: 1px solid #000">不锈钢</div>
    <div class="floor5 js-floor-item" data-cnt="建材型材" style="height: 400px;border: 1px solid #000">建材型材</div>
    <div class="floor6 js-floor-item" data-cnt="涂镀中厚板" style="height: 400px;border: 1px solid #000">涂镀中厚板</div>
    <div class="floor6 js-floor-item" data-cnt="圆钢带钢" style="height: 400px;border: 1px solid #000">圆钢带钢</div>
  </div>
  <script src="https://static.wuage.com/common/lib/jquery.min.js"></script>
  <script>
  var floor = $('.mod-floor')
  window.onload = function () {
    floor.css({'transform': 'translate(100px,0)'})
  }
  </script>
</body>
</html>